<!-- 分部分项维护 -->
<template>
  <base-breadcrumb :title="$route.meta.title">
    <a-card>
      <!-- 工程类别 -->
      <a-spin :spinning="spinning">
        <a-row type="flex" justify="space-between" align="middle" style="flex-wrap: nowrap; width: 100%">
          <!-- 工程类别列表 -->
          <div style="width: calc(100% - 470px)">
            <TabsProductType
              :id.sync="projectTypeId"
              ref="tabs"
              is-all
              :option.sync="projectType"
              @switch="getSubItem"
            />
          </div>
          <!-- 工程类别操作栏 -->
          <div class="mb12" style="padding: 0 32px; flex-shrink: 0">
            <a-button
              v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_028_01_add_01'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_028_01_add_01'
                      }
              ]"
              class="btn_right"
              type="primary"
              icon="plus"
              @click="handleOperate(0)"
            >
              添加工程类别
            </a-button>
            <!-- v-btnPermission="'qm_025_add_04'" -->
            <a-button
              v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_028_01_edi_02'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_028_01_edi_02'
                      }
              ]"
              :disabled="Object.keys(projectType).length < 1"
              class="btn_right"
              type="primary"
              icon="edit"
              @click="handleOperate(1)"
            >
              编辑工程类别
            </a-button>
            <!-- v-btnPermission="'qm_025_edi_05'" -->
            <a-button
              v-if="Object.keys(projectType).length > 0 && projectType.status == 0&&hideBuquBtn()"
              :disabled="Object.keys(projectType).length < 1"
              type="primary"
              icon="play-circle"
              @click="handleStopProduct"
            >
              启用工程类别
            </a-button>
            <!-- v-btnPermission="'qm_025_sto_06'" -->
            <a-button
              v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_028_01_sto_03'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_028_01_sto_03'
                      }
              ]"
              v-if="(Object.keys(projectType).length <= 0 ||  projectType.status != 0) &&hideBuquBtn()"
              :disabled="Object.keys(projectType).length < 1"
              type="danger"
              icon="stop"
              @click="handleStopProduct"
            >
              停用工程类别
            </a-button>
            <!-- v-btnPermission="'qm_025_sto_06'" -->
          </div>
        </a-row>
        <!-- 分部分项设置节点 -->
        <div>
          <title-name v-if="titleActive" :title="titleActive" />
          <!-- 树列表 -->
          <tree-search
            :id="projectTypeId"
            ref="treeSearch"
            is-all
            :show-search="false"
            :api="api"
            :query="{ enabled: enabled }"
            :initExpandAll="false"
            :dataChildren="true"
            :form-list="[
              {
                keyName: 'qualityMapping',
                type: 'BaseInput',
                span: 24,
                label: '分部分项维护映射'
              }
            ]"
            :selected-keys.sync="selectedKeys"
          >
            <!-- 节点头部操作栏 -->
            <template #header="scope">
              <div class="mb12" v-if="hideBuquBtn()">
                <a-button
                  v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_028_01_add_04'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_028_01_add_04'
                      }
              ]"
                  :disabled="selectedKeys && selectedKeys.length < 1"
                  class="btn_right"
                  type="primary"
                  icon="plus"
                  @click="scope.handleOperate(0)"
                >
                  添加节点
                </a-button>
                <a-button
                  v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_028_01_edi_05'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_028_01_edi_05'
                      }
              ]"
                  class="btn_right"
                  :disabled="(selectedKeys && selectedKeys.length < 1) || !scope.selectOptions.parentId"
                  type="primary"
                  icon="edit"
                  @click="scope.handleOperate(1)"
                >
                  编辑节点
                </a-button>
                <a-button
                  class="btn_right"
                  v-btnPermission="!scope.selectOptions.enabled ? [
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_028_01_sta_07'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_028_01_sta_07'
                      }
              ] : [
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_028_01_sto_06'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_028_01_sto_06'
                      }
              ]"
                  :type="!scope.selectOptions.enabled ? 'primary' : 'danger'"
                  :disabled="(selectedKeys && scope.selectedKeys.length < 1) || !scope.selectOptions.parentId"
                  :icon="!scope.selectOptions.enabled ? 'play-circle' : 'stop'"
                  @click="scope.handleStopNode"
                >
                  {{ !scope.selectOptions.enabled ? '启用' : '停用' }}节点
                </a-button>
                <!-- v-btnPermission="!enabled ? 'qm_028_sta_07' : 'qm_028_sto_06'" -->
                <a-button
                  :type="enabled ? 'primary' : 'danger'"
                  :icon="enabled ? 'eye' : 'eye-invisible'"
                  @click="
                    enabled = enabled === true ? '' : true
                    getSubItem()
                  "
                >
                  {{ enabled ? '显示' : '隐藏' }}停用节点
                </a-button>
              </div>
            </template>
          </tree-search>
        </div>
      </a-spin>
    </a-card>
    <!-- 工程类别表单弹窗 -->
    <add-product-classify
      ref="dialogProduct"
      :visible.sync="visible"
      :form.sync="form"
      :header-title="headerTitle"
      @confirm="submitForm"
    />
  </base-breadcrumb>
</template>

<script>
import addProductClassify from '@/views/quality/currency/subItemMaintenance/addProductClassify.vue' // 工程类别表单弹窗
import TreeSearch from '@/components/businessComponents/TreeSearch' // 树
import TabsProductType from '@/components/businessComponents/TabsProductType' // 工程类别tabs
import { subItem, projectType } from '@/api/quality/currency' // api
import cloneDeep from 'lodash.clonedeep' // 深拷贝

export default {
  name: 'a' + Date.now(),
  components: {
    addProductClassify,
    TreeSearch,
    TabsProductType
  },
  computed: {
    api() {
      return subItem
    },
    // 分部分项动态标题
    titleActive() {
      return Object.keys(this.projectType)?.length > 0 ? `${this.projectType.projectTypeName}分部分项设置` : ''
    },
    // 弹窗动态标题
    headerTitle() {
      return ['新增工程分类', '编辑工程分类'][this.editModel]
    }
  },
  data() {
    return {
      enabled: '', // 是否隐藏停用节点
      projectType: {}, //选中工程类别对象
      spinning: false, // 工程类别加载控件
      editModel: 0, // 操作类型：0 添加 1 编辑
      selectedKeys: [], // 选中节点数组
      form: {}, // 工程类别表单/节点表单
      visible: false, // 工程类别弹窗控件
      projectTypeId: '' // 工程类别选项控件
    }
  },
  methods: {
    getSubItem() {
      this.$nextTick(() => {
        this.$refs.treeSearch?.getList().catch(() => {
          this.enabled = this.enabled === true ? '' : true
        })
      })
    },
    // 新增/编辑: a弹窗类型；b操作类型
    handleOperate(a) {
      let form = cloneDeep(this.projectType) // 表单
      this.editModel = a
      this.form = a ? form : {}
      this.visible = true // 打开弹窗
    },
    // 切换工程状态：停用和启用
    handleStopProduct() {
      let that = this
      let e = that.projectType
      let status = ['启用', '停用'][e.status] || '操作'
      that.$confirm({
        title: '温馨提示',
        content: `确认${status}？`,
        cancelText: '关闭',
        onOk() {
          return projectType.switchStatus(e).then((res) => {
            that.$message.success(status + '成功！')
            that.$refs.tabs.getTitle()
          })
          // .catch((res) => {
          //   that.$message.warning(status + '失败！')
          // })
        }
      })
    },
    // 提交表单
    submitForm() {
      let that = this
      let name = ['create', 'update'][that.editModel] // 根据操作切换url地址
      projectType[name](that.form)
        .then((res) => {
          that.$refs.dialogProduct.loading = false
          that.$message.success(['添加', '编辑'][that.editModel] + '成功！')
          that.visible = false // 关闭弹窗
          that.$refs.tabs.getTitle().then((res) => {
            if (res) {
              that.getSubItem()
            }
          })
        })
        .catch((res) => {
          // that.$message.warning(['添加', '编辑'][that.editModel] + '失败！')
          that.$refs.dialogProduct.loading = false
        })
    }
  }
}
</script>

